<template>
	<div>
		<mt-header title="车辆年检信息">
		  <router-link to="/" slot="left">
		    <mt-button icon="back" >返回</mt-button>
		  </router-link>
		  <mt-button icon="more" slot="right" @click="more"></mt-button>
		</mt-header>
		<mt-popup  v-model="popupVisible" position="">
			<div class="more index1">首页</div>
			<div  class="more index2">消息</div>
			<div class="more index3">帮助</div>
		</mt-popup>
		
	    <div class="bigbox">
        	<div class="one"  v-for="(item,index) in list" :key="index" >
	        	<div class="bigbox-head" v-on:click="toggle(index)" >
		            <span class="head-sb">NO{{index+1}}<span>{{name}}</span></span>	
	        	</div>
	        	<div class="bigbox-info" >
	        		<div class="bigboxone">
	        			<div class="bigbox-info-one"><div class="gray">年检编号</div><div>P12315615</div></div>
		        		<div class="bigbox-info-one"><div class="gray">地区</div><div>P12315615</div></div>
		        		<div class="bigbox-info-one"><div class="gray">保险公司</div><div>P12315615</div></div>
	        		</div>
	        		<div class="bigboxtwo">
	        			<div class="bigbox-info-one"><div class="gray">车牌号码</div><div>P12315615</div></div>
		        		<div class="bigbox-info-one"><div class="gray">车牌种类</div><div>P12315615</div></div>
		        		<div class="bigbox-info-one"><div class="gray">车架号</div><div>P12315615</div></div>
	        		</div>
	        		<div class="bigboxthree">
	        			<div class="bigbox-info-one"><div class="gray">发动机号</div><div>P12315615</div></div>
	        		</div>
	        	</div>
        	</div>
	    </div>
	 
	</div>
</template>

<script>
  export default {
	  name: 'VehicleInspectionInformation',
	  data () {
      return {
      	popupVisible:false,
	   list:[
		    {"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"},
		    {"policyNum":"123456789","licenseNumber":"桂A080DK","nameCoverage":"中国人寿","time":"2018-11-16","statu":"期满","all":"123456.00","yes":"是"}
	        ]
    }
  },
  methods:{
	more(){
		this.popupVisible = true
	}
  }
}
	
</script>

<style>
  .item {
    display: inline-block;
  }
 
  .nav {
    padding: 10px;
  }
 
  .link {
    color: inherit;
    padding: 20px;
    display: block;
  }
  .bigbox{
  	background: #eee;
  }
 .bigbox>.one{
    width: 94%;
    margin-top: 15px;
    margin-left: 3%;
  }
  .bigbox-head{
  	height: 30px;
  	text-align: left;
  	background: #fff;
  	line-height: 38px;
  }
  .bigbox-info{
  	background: #fff;
  }
  .bigboxone,.bigboxtwo,.bigboxthree{
  	display: flex;
  }
  .bigbox-info-one{
  	width: 33%;
  }
  .gray{
  	color: orange;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
  }
  
  .head-sb{
  	font-weight: 800;
  	position: relative;
    top: -5px;
    left: 10px;
  }
  button{
  	    margin-top: 10px;
  }
  .mint-popup{
	z-index: 2003;
    width: 50%;
    background: #000;
    color: #fff;
    border-radius: 10px;
    position: fixed;
    top: 110px;
    margin-left: 90px;
}
.more{
	height: 43px;
	line-height: 43px;
	border-bottom: 1px solid #fff;
}
.index1{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
.index2{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
.index3{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
</style>